// 主页面 > 表格组件
import myTable from "@/components/table/advance/AdvanceTable";
export const myTableMixin = {
  components: { myTable },
  props: {
    // 按钮权限
    detailAction: {
      type: String,
      require: false,
    },
    editAction: {
      type: String,
      require: false,
    },
    deleteAction: {
      type: String,
      require: false,
    },
    addAction: {
      type: String,
      require: false,
    },
    importAction: {
      type: String,
      require: false,
    },
    exportAction: {
      type: String,
      require: false,
    },
    // 表格标题
    title: {
      type: String,
      require: false,
    },
    // 是否显示多选框，默认显示
    hasSelect: {
      type: Boolean,
      require: false,
      default: true,
    },
    scroll: {
      type: Object,
      require: false,
    },
    // 数据源
    dataSource: {
      type: Array,
      require: true,
    },
    // 绑定列
    columns: {
      type: Array,
      require: true,
    },
    // 行唯一键
    rowKey: {
      type: [String, Function],
      require: false,
      default: "id",
    },
    // 加载动画
    loading: {
      type: Boolean,
      require: true,
      default: false,
    },
    // 是否分页
    hasPage: {
      type: Boolean,
      require: false,
      default: true,
    },
    // 第一列单选框类型：单选/多选
    selectType: {
      type: String,
      require: false,
      default: "checkbox", // radio
    },
  },
  data() {
    return {
      customRow: (record, rowIndex) => {
        return {
          on: {
            // 事件
            //dblclick: this.onRowDoubleClick.bind(this, record, rowIndex),
            click: this.onRowClick, //.bind(this, record, rowIndex),
            // contextmenu: (event) => { },
            // mouseenter: this.onMouseenter.bind(this, record, rowIndex),  // 鼠标移入行
            // mouseleave: this.onMouseleave.bind(this, record, rowIndex),  // 鼠标移出行
          },
        };
      },
      // 当前选择所有行Key数据
      selectedRowKeys: [],
      selectedRows: [],
      // 表格选择列
      rowSelection: {
        columnWidth: 50,
        // selectedRowKeys: this.selectedRowKeys,
        // 选中项发生变化时的回调
        onChange: this.onRowSelectChange,
        onSelectAll: this.handleSelectAll,
        onSelect: this.handleRowSelected,
        // getCheckboxProps: this.getCheckboxProps,
        type: this.selectType,
        hideDefaultSelections: true,
      },
      // 分页插件
      pagination: {
        hideOnSinglePage: true, // 只有一页时是否隐藏分页器
        defaultCurrent: 1, // 默认的当前页数
        current: 1, // 当前页
        total: 0, // 总条数
        defaultPageSize: 20, // 默认的每页条数
        pageSize: 20, // 每页中显示20条数据
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ["20", "50", "100", "200", "500", "1000"], //每页中显示的数据
        showTotal: (total) => `共${total}条数据`, // 分页中显示总的数据
      },
      showAdd: false,
      showRemove: false,
      showEdit: false,
      showDetail: false,
      showImport: false,
      showExport: false,
      showOnClick: false,
      showOnSelectAll: false,
      showOnRowSelected: false,
    };
  },
  created() {
    if (this.columns.findIndex((m) => m.dataIndex == "tableIndex") == -1) {
      // 动态添加序号列
      this.columns.unshift({
        title: "序号",
        dataIndex: "tableIndex",
        width: 80,
        align: "center",
        scopedSlots: { customRender: "tableIndex" }, // 使用 scopedSlots 自定义渲染
      });
    }
    this.showAdd = this.$listeners["handleAdd"] ? true : false;
    this.showRemove = this.$listeners["removeSubmit"] ? true : false;
    this.showEdit = this.$listeners["handleEdit"] ? true : false;
    this.showDetail = this.$listeners["handleDetail"] ? true : false;
    this.showImport = this.$listeners["handleImport"] ? true : false;
    this.showExport = this.$listeners["handleExport"] ? true : false;
    this.showOnClick = this.$listeners["onRowClick"] ? true : false;
    this.showOnSelectAll = this.$listeners["handleSelectAll"] ? true : false;
    this.showOnRowSelected = this.$listeners["handleRowSelected"]
      ? true
      : false;
  },
  mounted() {},
  methods: {
    cleanSelect() {
      this.selectedRowKeys = [];
      this.selectedRows = [];
    },
    //表格行鼠标移入事件
    onRowClick(record, index, event) {
      // event.stopPropagation(); //阻止默认事件
      if (this.showOnClick) {
        this.$emit("onRowClick", record, index, event);
      }
    },
    handleSelectAll(selected, selectedRows, changeRows) {
      if (this.showOnSelectAll) {
        this.$emit("handleSelectAll", selected, selectedRows, changeRows);
      }
    },
    handleRowSelected(record, selected, selectedRows, nativeEvent) {
      if (this.showOnRowSelected) {
        this.$emit(
          "handleRowSelected",
          record,
          selected,
          selectedRows,
          nativeEvent
        );
      }
    },
    // handleUp(item) {
    //     this.$emit("handleUp", item);
    // },
    // handleDown(item) {
    //     this.$emit("handleDown", item);
    // },
    // 新增
    handleAdd() {
      this.$emit("handleAdd");
    },
    // 删除
    handleDelete(item) {
      var that = this;
      this.$confirm({
        title: "确定要删除吗?",
        onOk() {
          that.$emit("removeSubmit", [item.id], [item]);
        },
        onCancel() {},
      });
    },
    // 批量删除
    handleBatchDelete() {
      let that = this;
      if (this.selectedRowKeys.length > 0) {
        this.$confirm({
          title: "确定要删除吗?",
          onOk() {
            that.$emit("removeSubmit", that.selectedRowKeys, that.selectedRows);
          },
          onCancel() {},
        });
      } else {
        this.$message.warning("请选择至少一行数据");
      }
    },
    // 编辑
    handleEdit(item) {
      this.$emit("handleEdit", item);
    },
    // 导入
    handleImport() {
      this.$emit("handleImport");
    },
    // 导出
    handleExport() {
      this.$emit("handleExport");
    },
    // 详情
    handleDetail(item) {
      this.$emit("handleDetail", item);
    },
    // 分页、排序、筛选变化时触发
    handleTableChange(page, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = page.current;
      pager.pageSize = page.pageSize;
      this.pagination = pager;
      this.$emit("loadData");
    },
    // 表格多选框
    onRowSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // getCheckboxProps(item) {
    //    this.$emit("getCheckboxProps",item)
    // },
    // 查询
    handleSearch(conditions, searchOptions) {},
    // 刷新
    handleRefresh(conditions) {
      // if (this.hasPage) {
      //   this.pagination.current = 1
      // }
      this.conditions = conditions;
      this.$emit("loadData");
    },
    // 重置条件
    handleReset(conditions) {
      this.conditions = conditions;
      this.$emit("loadData");
    },
  },
};
